//ES Module的写法
// import Header from "./Header";
// import Content from "./Content";
// import Footer from "./Footer";

//CommonJS的写法
const Header = require('./Header');
const Content = require('./Content');
const Footer = require('./Footer');

new Header();
new Content();
new Footer();

//插入图片
import vueLogo from './logo.png';

//引入样式文件
// import './index.scss';

//ES Module引入样式文件
import styles from './index.scss';
console.log('styles', styles);

const img = new Image();
img.src = vueLogo;
img.className += `${styles.logo}`;

const app = document.getElementById('app');
app.appendChild(img);

import axios from 'axios';
axios.get('/api/Yixiantong/getHomeDatas').then(result => {
    console.log(result.data);
})

const button = document.createElement('button');
button.innerText = "按钮";
app.appendChild(button);

button.addEventListener('click', () => {
    const div = document.createElement('div');
    div.className = "item";
    div.innerText = "item";
    app.appendChild(div);
})

import counter from './counter';
import number from './number';

counter();
number();

//js代码更新时，页面会重新加载
if (module.hot) {
    module.hot.accept('./number', () => {
        // const oldDiv = document.getElementById('number');
        // const numberDiv = document.getElementById('numberDiv');
        // numberDiv.removeChild(oldDiv);
        number();
    })
}

//es代码
// import '@babel/polyfill'; //不用这种方式引入
//import 'core-js/stable';
const promiseArray = [
    new Promise(() => { }),
    new Promise(() => { })
];
promiseArray.map(promise => {
    console.log('promise', promise);
})


//
import { add } from './match';
add(10, 15);

//引入lodash工具库
//同步代码
// import _ from 'lodash';
// const result = _.join(['test1', 'test2', 'test3'], '~');
// console.log(result);


//异步代码
//加上注释后可以给异步引入的模块打包后生成的js文件设置名称
// function createElement() {
//     return import(/* webpackChunkName:"lodash" */'lodash').then(({ default: _ }) => {
//         const result = _.join(['test1', 'test2', 'test3'], '~');
//         const div = document.createElement('div');
//         div.innerText = result;
//         return div;
//     })
// }

// async function createElement() {
//     const { default: _ } = await import(/* webpackChunkName:"lodash" */'lodash');
//     const result = _.join(['test1', 'test2', 'test3'], '-');
//     const div = document.createElement('div');
//     div.innerText = result;
//     return div;
// }

// const myBtn = document.getElementById('my-btn');
// myBtn.addEventListener('click', () => {
//     const createElementPromise = createElement();
//     createElementPromise.then(div => {
//         document.body.appendChild(div);
//     })
// })

// import _ from 'lodash';
// import $ from 'jquery';

//使用ProvidePlugin配置lodash、jquery，不再需要import和require进行引入
const div = $('.hello');
div.html('hello!!');
$('body').append(div);

const result = join(['test1', 'test2', 'test3'], '-');
console.log(result);

//moment.js
const moment = require('moment');
require('moment/locale/zh-cn') ; //只引入中文
moment.locale('zh-cn');
console.log("locale", moment.locale);
console.log('date', moment().format('ll')); //ll是一个本地化格式化参数-2022年7月15日